<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0 0 0 200px;
        }

        .num {
            height: 20px;
            width: 1000px;
            line-height: 20px;
            text-align: center;
            font-size: 18px;
            padding: 0;
        }

        div {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            height: 600px;
            width: 1000px;
            background-color: #cccccc;
            position: relative;
            overflow: hidden;
        }

        .box > div {
            text-align: center;
            color: white;
            font-size: 20px;
            line-height: 30px;
        }

        .board {
            height: 20px;
            width: 100px;
            background-color: black;
            position: relative;
            top: -20px;
        }
    </style>
</head>
<body>
<p class="num"></p>
<div class="box"></div>
<div class="board"></div>
</body>
<script>
    window.onload = function () {
        let box = document.querySelector('.box');
        let board = document.querySelector('.board');
        let score = 0;

        function ceilGo(some, box) {
            let nowTop = some.offsetTop;
            let nowBottom = nowTop + some.clientHeight;
            if (nowBottom === 600) {
                let nowLeft = some.offsetLeft;
                let nowRight = nowLeft + some.clientWidth;
                let boardLeft = board.offsetLeft - 200;
                let boardRight = boardLeft + board.clientWidth;
                if (nowLeft < boardRight && nowRight > boardLeft) {
                    some.innerHTML = "Good!";
                    document.querySelector('.num').innerHTML = '当前分数：' + ++score;
                }
            }
            if (nowTop >= box.clientHeight)
                box.removeChild(some);
            else
                some.style.top = nowTop + 2 + 'px';
        }

        function createCeil(box) {
            if (box.clientHeight < 400)
                return;
            let boxWidth = box.clientWidth;
            let width = Math.floor(Math.random() * 100 + 50);
            let height = Math.floor(Math.random() * 100 + 50);
            let ceil = document.createElement('div');
            ceil.style.width = width + 'px';
            ceil.style.height = height + 'px';
            ceil.classList.add('ceil');
            ceil.style.position = 'absolute';
            ceil.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
            //第一次创建方块
            if (document.querySelectorAll('.ceil').length <= 0)
                ceil.style.left = Math.floor(Math.random() * (boxWidth - width)) + 'px';
            //根据上一个方块创建
            else {
                let last = document.querySelector('.ceil:last-of-type');
                let half = last.style.width.replace('px', '') / 2;
                let pos = last.offsetLeft + half;
                if (box.clientWidth - pos > pos)
                //在其右侧生成新方块
                    ceil.style.left = Math.floor(Math.random() * (boxWidth - pos - half - width) + half + pos) + 'px';
                else
                //在其左侧生成新方块
                    ceil.style.left = Math.floor(Math.random() * (pos - half - width)) + 'px';
            }
            //方块底边在盒子上边界
            ceil.style.top = '-' + height + 'px';
            box.append(ceil);
            //设置定时，时间间隔为2~5之间
            setInterval(function () {
                ceilGo(ceil, box);
            }, Math.floor(Math.random() * 4) + 2);
        }

        setInterval(function () {
            createCeil(box);
        }, 700);
        window.addEventListener('mousemove', function (e) {
            board.style.left = e.pageX - 200 + 'px';
        });
        document.querySelector('.num').innerHTML = '当前分数：' + 0;
    }
</script>
</html>